<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Backbone Demo</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>

    <h1>Add Contact</h1>
    <div id="addContact">
        <div>
            <label for="username">Username: </label>
            <input type="text" name="username" id="username">
        </div>
        <div>
            <label for="email">Email: </label>
            <input type="text" name="email" id="email">
        </div>
        <div>
            <label for="description">Description: </label>
            <textarea name="description" id="description" cols="30" rows="2"></textarea>
        </div>
        <div>
            <input type="submit" id="btn-addContact" value="add contact">
        </div>
    </div>

    <h1>Show Contacts</h1>
    <div id="showContact">
        <table id="contactList">
            <thead>
                <th>Username</th>
                <th>Email</th>
                <th>Description</th>
                <th>Operate</th>
            </thead>
        </table>
    </div>

    <script type="text/template" id="tpl_contact">
        <td><%= username%></td>
        <td><%= email%></td>
        <td><%= description%></td>
        <td><button class="edit">Edit</button> <button class="delete">Delete</button></td>
    </script>

    <script src="assets/js/lib/zepto.js"></script>
    <script src="assets/js/lib/underscore.js"></script>
    <script src="assets/js/lib/backbone.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/models.js"></script>
    <script src="assets/js/views.js"></script>
    <script src="assets/js/collections.js"></script>
    <script src="assets/js/routers.js"></script>

</body>
</html>
